import React from 'react'
import './home.css'
import { withRouter } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import Main from './main/main'
import News from './news/news'
import Chat from './chat/chat'
import Mine from './mine/mine'

class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 'main'
    }
  }
  // 所有组件中清空state
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  renderContent(tabTitle) {
    const key = this.state.selectedTab
    switch (key) {
      case 'main':
        return <Main history={this.props.history} />
        break
      case 'news':
        return <News title={tabTitle} />
        break
      case 'chat':
        return <Chat title={tabTitle} />
        break
      case 'mine':
        return <Mine />
        break
    }
  }
  render() {
    const tabbarTemplateData = [
      {
        title: "主页",
        key: "main",
        icon_bg_url: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat',
        selectedIcon_bg_url: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat',
        selectedPath: 'mainTab'
      },
      {
        title: "资讯",
        key: "news",
        icon_bg_url: 'url(https://zos.alipayobjects.com/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat',
        selectedIcon_bg_url: 'url(https://zos.alipayobjects.com/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat',
        selectedPath: 'newsTab'
      },
      {
        title: "微聊",
        key: "chat",
        icon_bg_url: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat',
        selectedIcon_bg_url: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat',
        selectedPath: 'chatTab'
      },
      {
        title: "我的",
        key: "mine",
        icon_bg_url: 'url(https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg) center center /  21px 21px no-repeat',
        selectedIcon_bg_url: 'url(https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg) center center /  21px 21px no-repeat',
        selectedPath: 'mineTab'
      }
    ]
    const tabbarTemplate = tabbarTemplateData.map((item, i) => {
      return <TabBar.Item
        title={item.title}
        key={item.key}
        icon={<div style={{
          width: '22px',
          height: '22px',
          background: `${item.icon_bg_url}`
        }}
        />
        }
        selectedIcon={<div style={{
          width: '22px',
          height: '22px',
          background: `${item.selectedIcon_bg_url}`
        }}
        />
        }
        selected={this.state.selectedTab === `${item.key}`}
        onPress={() => {
          this.setState({
            selectedTab: `${item.key}`,
          });
        }}
      >
        {this.renderContent(`${item.title}`)}
      </TabBar.Item>
    })
    return (
      <div>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {tabbarTemplate}
        </TabBar>
      </div>
    )
  }
}
// export default Home
// withRouter 可以使任何组件拥有路由的相关属性
export default withRouter(Home)
